<template>
  <el-table
    :data="data"
    border
    style="width: 100%"
    element-loading-text="拼命加载中"
    @sort-change="sortChange"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-if="select"
      type="selection"
      align="center"
    />
    <template v-for="(col,index) in tableTitle">
      <el-table-column
        v-if="col.type==='img'"
        :key="index"
        :prop="col.en"
        :label="col.cn"
        :width="col.width||'auto'"
        align="center"
      >
        <template slot-scope="scope">
          <div
            :style="'background:url('+scope.row[col.en]+') center /cover no-repeat ; width:50px;height:50px;margin:0 auto'"/>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="col.type==='phone'"
        :key="index"
        :label="col.cn"
        :width="col.width||'auto'"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row[col.en][0].telNum }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="col.type==='money'"
        :key="index"
        :label="col.cn"
        :width="col.width||'auto'"
        align="center"
      >
        <template slot-scope="scope">
          <div @click="showInput(scope.row,scope.row[col.en],scope.$index)" >
            <span v-if="!scope.row.inputVisible">
              {{ scope.row[col.en] }}
            </span>
            <el-input
              v-else
              v-model="inputValue"
              :ref="'saveTableInput'+scope.$index"
              size="mini"
              @blur="hiddenInput(scope.row,col.en)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :sortable="col.sortable?'custom':false"
        :key="index"
        :prop="col.en"
        :label="col.cn"
        :width="col.width||'auto'"
        align="center"
      />
    </template>

    <el-table-column
      v-if="defaultOperate"
      :min-width="width"
      :max-width="width"
      label="操作"
      align="center"
    >
      <template slot-scope="scope">
        <el-button v-if="readable" :class="btnClass" type="info" size="mini" @click="emit('read',scope)">查看
        </el-button>
        <el-button v-if="recoverable" :class="btnClass" type="info" size="mini" @click="emit('recover',scope)">
          撤回
        </el-button>
        <el-button
          v-if="scope.row.rolename!=='Administrator1'&&editable"
          :class="btnClass"
          size="mini"
          @click="emit('edit',scope)">修改
        </el-button>
        <el-button v-if="addable" :class="btnClass" type="primary" size="mini" @click="emit('add',scope)">添加
        </el-button>
        <el-button v-if="usable" :class="btnClass" type="primary" size="mini" @click="emit('use',scope)">选择
        </el-button>
        <el-button
          v-if="scope.row.rolename!=='Administrator'&&deletable"
          :class="btnClass"
          type="danger"
          size="mini"
          @click="emit('del',scope)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>

export default {
  props: {
    tableData: {
      type: Array,
      default: () => { return [] }
    },
    tableTitle: {
      type: Array,
      default: () => { return [] }
    },
    editPath: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    select: {
      type: Boolean,
      default: false
    },
    deletable: {
      type: Boolean,
      default: true
    },
    defaultOperate: {
      type: Boolean,
      default: true
    },
    readable: {
      type: Boolean,
      default: false
    },
    addable: {
      type: Boolean,
      default: false
    },
    usable: {
      type: Boolean,
      default: false
    },
    recoverable: {
      type: Boolean,
      default: false
    },
    btnClass: {
      type: String,
      default: () => ''
    },
    width: {
      type: String,
      default: () => '120px'
    }
  },
  data() {
    return {
      inputVisible: false,
      inputValue: ''
    }
  },
  computed: {
    data() {
      this.tableData.forEach(item1 => {
        this.tableTitle.forEach(item2 => {
          if (item2.type === 'money') {
            const status = (!item1[item2.en] && item1[item2.en] !== 0)
            this.$set(item1, 'inputVisible', status)
          }
        })
      })
      return this.tableData
    }
  },

  methods: {
    sortChange(column, prop, order) {
      console.log(column, prop, order)
      this.emit('sortChange', column, prop, order)
    },
    showInput(item, val, index) {
      console.log(item, val, index)
      this.inputValue = val
      item.inputVisible = true
      this.$nextTick(_ => {
        this.$refs['saveTableInput' + index][0].$refs.input.focus()
      })
    },
    hiddenInput(item, key) {
      item.inputVisible = false
      if (this.inputValue !== '') {
        item[key] = this.inputValue.replace(/^0*/, '')
      }
      this.inputValue = ''
    },

    emit(event, val) {
      if (event === 'del') {
        this.$confirm('是否删除该条信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit(event, val)
        }).catch(() => {
          return this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$emit(event, val)
      }
    },
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    }
  }
}
</script>

<style scoped>

</style>
